<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>异步登录</title>
    <script type="text/javascript" src="/ajax-day01/js/vue-2.6.12.js"></script>
    <script type="text/javascript" src="/ajax-day01/js/myajax.js"></script>
</head>
<body>
    <div id="app">
        <h2>{{msg}}</h2>
        <form action="" @submit.prevent="login">
            用户名: <input type="text" v-model="username" id=""> <br>
            密码: <input type="password" v-model="password" id=""><br>
            <input type="submit" value="登录">
        </form>
    </div>
    <script>
        const vm = new Vue({
            el:"#app",
            data:{
              username:"",
              password:"",
                msg:""
            },
            methods:{
                login(){
                    //提交表单时,发起ajax异步请求
                    let url="/ajax-day01/login";
                    let data = `username=${this.username}&password=${this.password}`;
                    let type="post";
                    myAjax(url,data,type,(result)=>{
                        if(result == "success"){
                            //跳转到图书展示页面
                            location.href = "/ajax-day01/book/show.html";
                        }else{
                            //回显错误信息
                            this.msg = "用户名或密码错误,登录失败";
                        }
                    })
                }
            }
        })
    </script>
</body>
</html>